<template>
	<view>
		
		<view class="wrap">
			<text class="txt">评论({{usersCommentArr.length}})</text>
			<block v-for="(item,index) in usersCommentArr" :key="index">
				<view class="wrap-nickname">
					<view class="wrap-nicknameas">
						<image :src="item.avatarUrl" mode=""></image>
						<view>{{item.nickName}}</view>
					</view>
					<text class="times">{{item.time}}</text>
				</view>
				<view class="wrap-message">{{item.comme}}</view>
			</block>
		</view>
		
		
		<view class="pinglun-wrap">
			<input type="text" value="" placeholder="评论一下吧!" v-model="pinlunText"/>
			<text @click="fabiao">发表</text>
		</view>
		
		<!-- 反馈组件 -->
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>

	</view>
</template>

<script>
	import {mapState} from 'vuex'
	
	//顶部消息提示插件
	 import HMmessages from "@/HMtolel/HM-messages/HM-messages.vue"

	//引入时间模块
	var util = require('../../../components/timer.js');
	var time = util.formatTime(new Date());
	
	export default{
		props:['usersCommentArr'],
		data(){
			return{
				pinlunText:'', //输入框中的消息
				commId:'',//当前数据详情的id
			}
		},
		components:{
			HMmessages
		},
		methods:{
			fabiao(){
				const db = wx.cloud.database()
				db.collection('users').get().then(res=>{
					if(res.data == 0){
						console.log('未登录')
						this.HMmessages.show("请先去个人中心登录",{icon:'error',fontColor:'#000000',background:'#f40000',iconColor:'#000000'})

					}else{
						console.log('已经登录')
						console.log()
						this.fabiaoCommt(res)
						
					}
				}).catch(err=>{
					console.log(err)
				})
				
			},
			
			//评论所要上传的数据
			fabiaoCommt(res){
				if(this.pinlunText==''){
					this.HMmessages.show("请输入评论内容",{icon:'error',fontColor:'#000000',background:'#f40000',iconColor:'#000000'})

				}else{
					//点击上传以后将评论所需要的东西上传数据库
					this.usersComment = {
						avatarUrl:res.data[0].avatarUrl,
						nickName:res.data[0].nickName,
						comme:this.pinlunText,
						time:time,
						commId:this.commId
					}
					const db = wx.cloud.database()
					db.collection('comment').add({
						data:this.usersComment,
						
					}).then(res=>{
						console.log(res)
						this.pinlunText=''
						this.HMmessages.show("评论成功",{icon:'success',fontColor:'#000000',background:'#38f417',iconColor:'#000000'})
						
						//发表成功页面不跟新所以传值给vuex让computed属性监听
						let pagesis = true
						this.$store.commit("roturnMuta",pagesis)
						
					}).catch(err=>{
						console.log(err)
					})
				}
			},
			
		},
		computed:{
			...mapState(['commentsIds']),
			coun(){
				// console.log(typeof(this.commentsIds.commentsIding))
				this.commId = this.commentsIds.commentsIding
			}
		},
	}
</script>

<style lang="scss">
	.pinglun-wrap{
		width: 100%;
		height: 80upx;
		position: fixed;
		bottom: 38upx;left: 0;
		// background-color: #2C405A;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		padding: 5upx 20upx;
		input{
			margin-right: 5upx;
			padding: 0 15upx;
			width:75%;
			height: 100%;
			background-color: #ffffff;
			border-radius: 20upx;
			border: 2px solid #55ffff;
		}
		text{
			border: 1px solid #5353fa;
			color: #2f2f2f;
			font-size: 25upx;
			padding: 20upx 28upx;
			border-radius: 20upx;
			box-sizing: border-box;
			box-shadow: 0 0 15upx rgba(170, 85, 255, 0.5);
		}
	}
	
	//评论消息
	.wrap {
		display: flex;
		flex-direction: column;
		margin-bottom: 240upx;
	}
	
	.wrap .txt {
		padding: 20upx 20upx;
		font-weight: bold;
	}
	
	.wrap-nickname {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10upx 20upx;
	}
	
	.wrap-nicknameas {
		display: flex;
		justify-content: start;
		align-items: center;
	}
	
	.wrap-nickname image {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		margin-right: 20upx;
	}
	
	.wrap-nickname view {
		font-size: 25upx;
		color: #aaaaaa;
	}
	
	.wrap-message {
		padding: 0 0 20upx 20upx;
	}
	
	.times {
		font-size: 25upx;
		color: #aaaaaa;
	}
</style>
